<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>编码神器Atom使用详解 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="Atom,">
  

  <meta name="description" content="Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。她很大程度上继承了SublimeText的美，而又不仅如此。而如今试用了 Atom 一个多月以来，我被迫见异思迁了，幸好我不是一个喜新厌旧的男人～在编码砌字时，很多时候一款编辑器的标签不够用的，所以现在两款兼而用之。 Atom与SublimeText3对比">
<meta name="keywords" content="Atom">
<meta property="og:type" content="article">
<meta property="og:title" content="编码神器Atom使用详解">
<meta property="og:url" content="http://blog.poetries.top/2016/03/14/编码神器Atom使用详解/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。她很大程度上继承了SublimeText的美，而又不仅如此。而如今试用了 Atom 一个多月以来，我被迫见异思迁了，幸好我不是一个喜新厌旧的男人～在编码砌字时，很多时候一款编辑器的标签不够用的，所以现在两款兼而用之。 Atom与SublimeText3对比">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://7xoosr.com1.z0.glb.clouddn.com/atom.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.942Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="编码神器Atom使用详解">
<meta name="twitter:description" content="Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。她很大程度上继承了SublimeText的美，而又不仅如此。而如今试用了 Atom 一个多月以来，我被迫见异思迁了，幸好我不是一个喜新厌旧的男人～在编码砌字时，很多时候一款编辑器的标签不够用的，所以现在两款兼而用之。 Atom与SublimeText3对比">
<meta name="twitter:image" content="http://7xoosr.com1.z0.glb.clouddn.com/atom.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#Atom安装篇"><span class="toc-text">Atom安装篇</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Atom的插件安装"><span class="toc-text">Atom的插件安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Atom快捷键篇"><span class="toc-text">Atom快捷键篇</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#编辑和删除文本"><span class="toc-text">编辑和删除文本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#推荐一些好用的插件"><span class="toc-text">推荐一些好用的插件</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-编码神器Atom使用详解" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">编码神器Atom使用详解</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.03.14</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/工欲善其事必先利其器/">工欲善其事必先利其器</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 2.4k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 10分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <p><a href="https://atom.io/" target="_blank" rel="noopener">Atom</a> 是 <code>Github</code> 专门为程序员推出的一个跨平台文本编辑器。她很大程度上继承了SublimeText的美，而又不仅如此。而如今试用了 <code>Atom</code> 一个多月以来，我被迫见异思迁了，幸好我不是一个喜新厌旧的男人～在编码砌字时，很多时候一款编辑器的标签不够用的，所以现在两款兼而用之。</p>
<p><strong>Atom与SublimeText3对比</strong><br><a id="more"></a></p>
<hr>
<ul>
<li>Atom1.0之后，有比Sublime更美的UI，不输Sublime的插件包，比Sublime更加舒适的细节，比如：Atom下<br><code>cmd-\</code></li>
<li>显示或隐藏目录树；（Sublime默认是 <code>Ctrl＋K+B</code> ）。<br>更为简洁人性化的设置/插件安装等（当然SublimeText也不太复杂）。</li>
<li>Atom算是一款web app，源码都是 CoffeeScript 写的，连界面都可以用 CSS来自定义，扩展可以用JS开发，完全可以深度定制打造自己的IDE。Sublime基于Python，两者扩展性都非常强。</li>
<li><strong>Atom</strong> 暂时还是免费的。而SublimeText，额，一直会弹那个框(使用网上注册码？)。</li>
<li>对 <strong>Markdown</strong>的支持更加完美(见下文)；这一点真心是赞的不要不要的。</li>
<li>类Web App嘛，对各平台的支持更为有好；比如：在mac下打开xxx文件/文件夹，Atom：terminal下直接 atom <strong>xxx</strong><br>即可。而SublimeText会相对繁琐很多，比如为其添加系统别名，可参见<a href="http://www.jeffjade.com/2015/07/29/2015-07-29-mac-musthave-software/" target="_blank" rel="noopener">Mac必备软件渐集之ZSH－终极Shell</a>。windows下，安装了<br>Atom，就已经在鼠标右键列表了。</li>
<li>Atom,类Web的年轻一代编辑神器，在打开软件速度上稍逊SublimeText3。相比之下，对大文件响应处理上相比之下，还需很大提升。不过潜力还是挺足的。</li>
<li>Atom 有友好的中文社区<a href="https://atom-china.org/" target="_blank" rel="noopener">Atom China</a>。</li>
</ul>
<p>关于如何初步使用Atom，可以参见 <a href="https://atom-china.org/t/guan-fang-shou-ce-atom-ji-chu-shi-yong/62" target="_blank" rel="noopener">官方手册：Atom 基础使用。</a></p>
<p><img src="http://7xoosr.com1.z0.glb.clouddn.com/atom.png" alt="此处输入图片的描述"></p>
<h3 id="Atom安装篇"><a href="#Atom安装篇" class="headerlink" title="Atom安装篇"></a>Atom安装篇</h3><p><strong>Atom软件本身安装</strong></p>
<ol>
<li>可以去Atom官网下载安装包，跟普通安装一致。</li>
<li>可以在终端terminal中安装：</li>
</ol>
<p>Mac OS</p>
<blockquote>
<p>~ brew install Caskroom/cask/atom</p>
</blockquote>
<p>Window OS<br>可以用管理员身份打开Powershell，然后用 choco install 去安装 Atom.</p>
<blockquote>
<p>choco install atom</p>
</blockquote>
<p>这一点具体可以参见文章： <a href="http://www.jeffjade.com/2016/01/13/2016-01-13-windows-software-cmder/" target="_blank" rel="noopener">Win下必备神器之Cmder</a></p>
<h3 id="Atom的插件安装"><a href="#Atom的插件安装" class="headerlink" title="Atom的插件安装"></a>Atom的插件安装</h3><ol>
<li><code>Command+Shift+P</code>呼出设置界面，点击 Install<br>，在调出的页面输入框中输入你想安装的插件名，搜索这个插件，然后再出现的插件选项中点击下载。</li>
<li>Atom编辑器还自带了一个叫做apm(Atom Package<br>Manager)的包管理工具，用过<code>npm</code>的同学应该对包管理工具不会陌生，我们可以通过apm查找Atom插件，安装和删除插件等操作。比如对emmet插件的操作。</li>
</ol>
<blockquote>
<p>//查找<br>~ apm search emmet<br>//安装<br>~ apm install emmet<br>//删除<br>~ apm remove emmet</p>
</blockquote>
<h3 id="Atom快捷键篇"><a href="#Atom快捷键篇" class="headerlink" title="Atom快捷键篇"></a>Atom快捷键篇</h3><p><strong>文件切换</strong></p>
<p><code>ctrl-shift-s</code> 保存所有打开的文件<br><code>cmd-shift-o</code> 打开目录<br><code>cmd-\</code> 显示或隐藏目录树<br><code>ctrl-0</code> 焦点移到目录树<br>目录树下，使用a，m，delete来增加，修改和删除<br><code>cmd-t</code>或<code>cmd-p</code> 查找文件<br><code>cmd-b</code> 在打开的文件之间切换<br><code>cmd-shift-b</code> 只搜索从上次<code>git commit</code>后修改或者新增的文件</p>
<p><strong>导航</strong></p>
<p>（等价于上下左右）<br><code>ctrl-p</code> 前一行<br><code>ctrl-n</code> 后一行<br><code>ctrl-f</code> 前一个字符<br><code>ctrl-b</code> 后一个字符<br><code>alt-B</code>, <code>alt-left</code> 移动到单词开始<br><code>alt-F</code>, <code>alt-right</code> 移动到单词末尾<br><code>cmd-right</code>, <code>ctrl-E</code> 移动到一行结束<br><code>cmd-left</code>, <code>ctrl-A</code> 移动到一行开始<br><code>cmd-up</code> 移动到文件开始<br><code>cmd-down</code> 移动到文件结束<br><code>ctrl-g</code> 移动到指定行 <code>row:column</code> 处<br><code>cmd-r</code> 在方法之间跳转</p>
<p><strong>目录树操作</strong></p>
<p><code>cmd-\</code> 或者 <code>cmd-k</code> <code>cmd-b</code> 显示(隐藏)目录树<br><code>ctrl-0</code> 焦点切换到目录树(再按一次或者Esc退出目录树)<br><code>a</code> 添加文件<br><code>d</code> 将当前文件另存为(duplicate)<br><code>i</code> 显示(隐藏)版本控制忽略的文件<br><code>alt-right</code> 和 <code>alt-left</code> 展开(隐藏)所有目录<br><code>ctrl-al-]</code> 和 <code>ctrl-al-[</code> 同上<br><code>ctrl-[</code> 和 <code>ctrl-]</code> 展开(隐藏)当前目录<br><code>ctrl-f</code> 和 <code>ctrl-b</code> 同上<br><code>cmd-k h</code> 或者 <code>cmd-k left</code> 在左半视图中打开文件<br><code>cmd-k j</code> 或者 <code>cmd-k down</code> 在下半视图中打开文件<br><code>cmd-k k</code> 或者 <code>cmd-k up</code> 在上半视图中打开文件<br><code>cmd-k l</code> 或者 <code>cmd-k right</code> 在右半视图中打开文件<br><code>ctrl-shift-C</code> 复制当前文件绝对路径<br>书签<br><code>cmd-F2</code> 在本行增加书签<br><code>F2</code> 跳到当前文件的下一条书签<br><code>shift-F2</code> 跳到当前文件的上一条书签<br><code>ctrl-F2</code> 列出当前工程所有书签</p>
<p><strong>选取</strong></p>
<pre><code>大部分和导航一致，只不过加上shift
</code></pre><p><code>ctrl-shift-P</code> 选取至上一行<br><code>ctrl-shift-N</code> 选取至下一样<br><code>ctrl-shift-B</code> 选取至前一个字符<br><code>ctrl-shift-F</code> 选取至后一个字符<br><code>alt-shift-B</code>, <code>alt-shift-left</code> 选取至字符开始<br><code>alt-shift-F</code>, <code>alt-shift-right</code> 选取至字符结束<br><code>ctrl-shift-E</code>, <code>cmd-shift-right</code> 选取至本行结束<br><code>ctrl-shift-A</code>, <code>cmd-shift-left</code> 选取至本行开始<br><code>cmd-shift-up</code> 选取至文件开始<br><code>cmd-shift-down</code> 选取至文件结尾<br><code>cmd-A</code> 全选<br><code>cmd-L</code> 选取一行，继续按回选取下一行<br><code>ctrl-shift-W</code> 选取当前单词</p>
<h3 id="编辑和删除文本"><a href="#编辑和删除文本" class="headerlink" title="编辑和删除文本"></a>编辑和删除文本</h3><p><strong>基本操作</strong></p>
<p><code>ctrl-T</code> 使光标前后字符交换<br><code>cmd-J</code> 将下一行与当前行合并<br><code>ctrl-cmd-up</code>, <code>ctrl-cmd-down</code> 使当前行向上或者向下移动<br><code>cmd-shift-D</code> 复制当前行到下一行<br><code>cmd-K</code>, <code>cmd-U</code> 使当前字符大写<br><code>cmd-K</code>, <code>cmd-L</code> 使当前字符小写</p>
<p><strong>删除和剪切</strong></p>
<p><code>ctrl-shift-K</code> 删除当前行<br><code>cmd-backspace</code> 删除到当前行开始<br><code>cmd-fn-backspace</code> 删除到当前行结束<br><code>ctrl-K</code> 剪切到当前行结束<br><code>alt-backspace</code> 或 <code>alt-H</code> 删除到当前单词开始<br><code>alt-delete</code> 或 <code>alt-D</code> 删除到当前单词结束</p>
<p><strong>多光标和多处选取</strong></p>
<p><code>cmd-click</code> 增加新光标<br><code>cmd-shift-L</code> 将多行选取改为多行光标<br><code>ctrl-shift-up</code>, <code>ctrl-shift-down</code> 增加上（下）一行光标<br><code>cmd-D</code> 选取文档中和当前单词相同的下一处<br><code>ctrl-cmd-G</code> 选取文档中所有和当前光标单词相同的位置</p>
<p><strong>括号跳转</strong></p>
<p><code>ctrl-m</code> 相应括号之间，html tag之间等跳转<br><code>ctrl-cmd-m</code> 括号(tag)之间文本选取<br><code>alt-cmd-.</code> 关闭当前XML/HTML tag</p>
<p><strong>编码方式</strong></p>
<p><code>ctrl-shift-U</code> 调出切换编码选项</p>
<p><strong>查找和替换</strong></p>
<p><code>cmd-F</code> 在buffer中查找<br><code>cmd-shift-f</code> 在整个工程中查找</p>
<p><strong>代码片段</strong></p>
<p><code>alt-shift-S</code> 查看当前可用代码片段</p>
<blockquote>
<p>在~/.atom目录下snippets.cson文件中存放了你定制的snippets</p>
</blockquote>
<p><a href="https://atom.io/docs/v1.0.0/using-atom-snippets" target="_blank" rel="noopener">定制说明</a></p>
<p><strong>自动补全</strong></p>
<p><code>ctrl-space</code> 提示补全信息</p>
<p><strong>折叠</strong></p>
<p><code>alt-cmd-[</code> 折叠<br><code>alt-cmd-]</code> 展开<br><code>alt-cmd-shift-{</code> 折叠全部<br><code>alt-cmd-shift-}</code> 展开全部<br><code>cmd-k cmd-N</code> 指定折叠层级 N为层级数</p>
<p><strong>文件语法高亮</strong></p>
<p><code>ctrl-shift-L</code> 选择文本类型</p>
<p><strong>使用Atom进行写作</strong></p>
<p><code>ctrl-shift-M</code> Markdown预览</p>
<p>可用代码片段</p>
<blockquote>
<p>b, legal, img, l, i, code, t, table</p>
</blockquote>
<p><strong>git操作</strong></p>
<p><code>cmd-alt-Z</code> checkout HEAD 版本<br><code>cmd-shift-B</code> 弹出untracked 和 modified文件列表<br><code>alt-g down</code> <code>alt-g up</code> 在修改处跳转<br><code>alt-G D</code> 弹出diff列表<br><code>alt-G O</code> 在github上打开文件<br><code>alt-G G</code> 在github上打开项目地址<br><code>alt-G B</code> 在github上打开文件blame<br><code>alt-G H</code> 在github上打开文件history<br><code>alt-G I</code> 在github上打开issues<br><code>alt-G R</code> 在github打开分支比较<br><code>alt-G C</code> 拷贝当前文件在gihub上的网址</p>
<h3 id="推荐一些好用的插件"><a href="#推荐一些好用的插件" class="headerlink" title="推荐一些好用的插件"></a>推荐一些好用的插件</h3><p><strong>主题</strong></p>
<p><a href="https://atom.io/themes/seti-ui" target="_blank" rel="noopener">seti-ui</a>A dark colored UI theme for Atom with custom file icons. (+Seti Syntax)<br><a href="https://atom.io/themes/atom-material-ui" target="_blank" rel="noopener">atom-material-ui</a> 好看到爆<br><a href="https://atom.io/themes/atom-material-syntax" target="_blank" rel="noopener">atom-material-syntax</a></p>
<p><strong>美化</strong></p>
<p><a href="https://atom.io/packages/atom-beautify" target="_blank" rel="noopener">atom-beautify</a> 一键代码美化<br><a href="https://atom.io/packages/file-icons" target="_blank" rel="noopener">file-icons</a> 给文件加上好看的图标<br><a href="https://atom.io/users/atom-minimap" target="_blank" rel="noopener">atom-minimap</a> 方便美观的缩略滚动图</p>
<p><strong>git</strong></p>
<p><a href="https://atom.io/packages/atomatigit" target="_blank" rel="noopener">atomatigit</a> 可视化git操作</p>
<p><strong>代码提示</strong></p>
<p><a href="https://atom.io/packages/emmet" target="_blank" rel="noopener">emmet</a> 这个不用介绍了吧，前端开发必备，谁用谁知道；<br><a href="https://atom.io/packages/atom-ternjs" target="_blank" rel="noopener">atom-ternjs</a> js代码提示很强大，高度定制化<br><a href="https://atom.io/packages/docblockr" target="_blank" rel="noopener">docblockr</a> jsdoc 给js添加注释<br><a href="https://atom.io/packages/color-picker" target="_blank" rel="noopener">color-picker</a> 取色器 必备插件<br><a href="https://atom.io/packages/pigments" target="_blank" rel="noopener">pigments</a> 颜色显示插件 必装<br><a href="https://atom.io/packages/terminal-panel" target="_blank" rel="noopener">terminal-panel</a> 直接在atom里面写命令了<br><a href="https://atom.io/packages/svg-preview" target="_blank" rel="noopener">svg-preview</a> svg预览</p>
<p><strong>便捷操作</strong></p>
<p><a href="https://atom.io/packages/advanced-open-file" target="_blank" rel="noopener">advanced-open-file</a> 快速打开、切换文件</p>
<p><strong>代码校验</strong></p>
<p><a href="https://atom.io/packages/linter" target="_blank" rel="noopener">linter</a>代码校验工具;A Base Linter with Cow Powers</p>
<p><strong>Web前端</strong></p>
<p><a href="https://atom.io/packages/autoclose-html" target="_blank" rel="noopener">autoclose-html</a> 闭合html标签<br><a href="https://atom.io/packages/language-vue-component" target="_blank" rel="noopener">language-vue-component</a> Atom编写Vue高亮<br><a href="https://atom.io/packages/vue-autocompile" target="_blank" rel="noopener">vue-autocompile</a> Auto compiles vue in atom<br><a href="https://atom.io/packages/language-vue" target="_blank" rel="noopener">language-vue</a> Syntax highlighting for vue component files<br>其插件已相当丰满，可以在<a href="https://atom.io/packages" target="_blank" rel="noopener">这里</a>搜索查找。Packages make Atom do amazing things.</p>
<p><strong>舒爽书写作(Markdown)</strong></p>
<p>Atom有自带MarkdownPreview,支持<code>Ctrl＋Shift＋M</code>实时预览。装上<a href="https://atom.io/packages/markdown-writer" target="_blank" rel="noopener">markdown-writer</a>插件，根据其默认配置:Settings for Keymaps，完美；想必之下比<code>SublimeText</code>下的书写爽很多；也比简书，作业部落要更为强大。 比如对已经写下的文字加粗，选中 <code>Command＋B</code>即可；如果文字还没写，空格下 <code>Command＋B</code> 就会生成 <strong>｜</strong>，光标在第二个<code>*</code>之后，很是方便。 当然这快捷是可以更改的， <code>cmd + shift + p</code>输入setting呼出设置界面自行更改。 <code>markdown-writer</code>书写 Markdown 默认快捷键如下：</p>
<p><strong>快捷键操作</strong>         <strong>作用效果</strong><br><code>“shift-cmd-K”</code>:    “markdown-writer : insert-link”<br><code>“shift-cmd-I”</code>:    “markdown-writer : insert-image”<br><code>“cmd-i”</code>:    “markdown-writer : toggle-italic-text”<br><code>“cmd-b”</code>:    “markdown-writer : toggle-bold-text”<br><code>“cmd-‘“</code>:    “markdown-writer : toggle-code-text”<br><code>“cmd-k”</code>:    “markdown-writer : toggle-keystroke-text”<br><code>“cmd-h”</code>:    “markdown-writer : toggle-strikethrough-text”<br><code>“ctrl-alt-1”</code>:    “markdown-writer : toggle-h1”<br><code>“ctrl-alt-2”</code>:    “markdown-writer : toggle-h2”<br><code>“ctrl-alt-3”</code>:    “markdown-writer : toggle-h3”<br><code>“ctrl-alt-4”</code>:    “markdown-writer : toggle-h4”<br><code>“ctrl-alt-5”</code>:    “markdown-writer : toggle-h5”<br><code>“shift-cmd-O”</code>:    “markdown-writer : toggle-ol”<br><code>“shift-cmd-U”</code>:    “markdown-writer : toggle-ul”<br><code>“shift-cmd-&gt;”</code>:    “markdown-writer : toggle-blockquote”<br><code>‘shift-cmd-“‘</code>:    “markdown-writer : toggle-codeblock-text”<br><code>“cmd-j cmd-p”</code>:    “markdown-writer : jump-to-previous-heading”<br><code>“cmd-j cmd-n”</code>:    “markdown-writer : jump-to-next-heading”<br><code>“cmd-j cmd-d”</code>:    “markdown-writer : jump-between-reference-definition”<br><code>“cmd-j cmd-t”</code>:    “markdown-writer : jump-to-next-table-cell”</p>
<p><strong>本文转载自：</strong> [新编码神器Atom使用纪要][30]</p>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/03/14/Emmet：HTML-CSS代码快速编写神器/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/03/14/Hexo-GitHub搭建免费博客/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
